<template>
  <div class="h-full bg-grey">
    <van-nav-bar title="公告详情" left-arrow @click-left="$router.push('/')" />
    <div class="p-10 bg-white">
      <van-skeleton :row="2" :loading="!ready" class="m-v-5">
        <p class="fs-rem-18px text-title">{{detail.title}}</p>
        <div class="fs-rem-12px text-grey m-t-10 flex j-between">
          <span class="flex a-center">
            <van-icon name="clock-o" />
            <span class="m-l-5">{{detail.createDate}}</span>
          </span>
          <span class="flex a-center">
            <van-icon name="edit" />
            <span class="m-l-5">{{detail.updateDate}}</span>
          </span>
        </div>
      </van-skeleton>
    </div>
    <div class="h-full bg-white m-t-15">
      <van-skeleton :row="5" :loading="!ready" class="m-v-5">
        <div class="fs-rem-14px p-10 text-content" v-html="detail.content"></div>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import xss from 'xss'
export default {
  data () {
    return {
      ready: false,
      detail: {}
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getDetail()
    },
    async getDetail () {
      let id = this.$route.params.id
      let { oaNotify } = await this.$api.post('/notify/get', { id })
      oaNotify = JSON.parse(JSON.stringify(oaNotify))
      // 防止xss攻击
      let filterContent = xss(oaNotify.content)
      oaNotify.content = filterContent
      this.detail = oaNotify
      this.ready = true
    }
  }
}
</script>

<style lang="scss" scoped>
.b-w-15 {
  border-width: 15px;
}
</style>
